<template>
    <div class="invitation_list">
        <el-table :data="tableData" style="width: 100%" header-row-class-name="table_header_row"
            header-cell-class-name="table_header_cell" row-class-name="table_row" cell-class-name="table_cell">
            <el-table-column :label="$t('table.时间')" prop="createtime" />
            <el-table-column :label="$t('table.昵称')" prop="nickname" />
            <el-table-column :label="$t('table.奖励')" prop="price" />
        </el-table>
        <div style="display: flex;align-items: center;justify-content: center;">
            <el-pagination background layout="prev, pager, next" :current-page="page" :total="total"
                @current-change="change" />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            page: 1,
            tableData: [],
            total: 0
        }
    },
    created() {
        this.getList();
    },

    methods: {
        async getList() {
            let { list: res } = await this.$api.usersApi.inviteList({
                page: this.page
            });
            this.total = res.total;
            this.tableData = res.data;
        },
        change(value) {
            this.page = value;
            this.getList();
        }
    },
}
</script>
<style lang="scss">
.invitation_list {
    padding-top: 25px;
    box-sizing: border-box;

    .el-table {
        border-radius: 14px;
        overflow: hidden;

        .table_header_row {
            background: #3E8BFF;
        }

        .table_header_cell {
            height: 40px;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
            background: #3E8BFF;
        }

        .table_cell {
            height: 44px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }
    }
}
</style>